<template>
	<view>
		<view class="cu-card article">
			<view class="cu-item">
				<view class="flex justify-start align-start">
					<view class="flex justify-start align-center padding-left padding-top"
						style="flex-direction: column;">
						<view class="radius padding-bottom-xs">
							<image class="radius" :src="voucher.policy.forum.icon" style="width:66px;height:66px;">
							</image>
						</view>
					</view>
					<view class="padding-left padding-top padding-right flex justify-between align-center"
						style="width: 100%;">
						<view class="flex justify-start align-start" style="flex-direction: column;">
							<text class="text-df text-bold">{{voucher.unlock_sn}}</text>
							<text class="text-df padding-top padding-bottom">《{{voucher.policy.forum.name}}》的订阅券</text>
							<view class="flex justify-start align-center">
								<view v-if="voucher.policy.price > 0">
									<text class="text-df padding-right-sm">该券价值:<text
											class="text-price text-red">{{voucher.policy.price/100}}元</text></text>
								</view>
								<view v-if="voucher.status==1">
									<view class="cu-tag line-grey sm radius">已使用</view>
								</view>
								<view v-else-if="voucher.status==-1">
									<view class="cu-tag line-gray sm radius">已作废</view>
								</view>
								<view v-else>
									<button @tap="useAction"
										class="cu-btn bg-gradual-blue sm radius">立即使用</button>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:'SubscribeVoucherItem',
		props: {
			voucher: {
				type: Object,
				default: {}
			},
		},
		methods: {
			useAction() {
				this.$emit('useNow')
			}
		},
	}
</script>

<style scoped>

</style>
